<template>
  <v-app>
    <v-navigation-drawer app>
      <v-card class="mx-auto" max-width="300" tile height="100%">
        <v-list rounded>
          <v-subheader>REPORTS</v-subheader>
          <v-list-item-group v-model="selectedItem" color="primary">
            <v-list-item v-for="(item, i) in items" :key="i">
              <v-list-item-icon>
                <v-icon v-text="item.icon"></v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <router-link :to="item.path">
                  <v-list-item-title v-text="item.text"></v-list-item-title>
                </router-link>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-card>
    </v-navigation-drawer>

    <v-app-bar app>
      <!-- -->
      <loginName :username="username"></loginName>
    </v-app-bar>

    <!-- 根据应用组件来调整你的内容 -->
    <v-main class="main-h">
      <!-- 给应用提供合适的间距 -->
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-main>

    <v-footer app>
      <!-- -->
    </v-footer>
  </v-app>
</template>

<script>
import loginName from "./login";
export default {
  components: {
    loginName,
  },
  data() {
    return {
      selectedItem: 1,
      username: "",
      items: [
        { text: "导航一", icon: "mdi-clock", path: "/login" },
        { text: "导航二", icon: "mdi-account", path: "/C" },
        { text: "导航三", icon: "mdi-flag", path: "/D" },
        { text: "导航四", icon: "mdi-flag", path: "/A" },
        { text: "导航五", icon: "mdi-flag", path: "/B" },
        { text: "导航六", icon: "mdi-flag", path: "/B" },
      ],
    };
  },
  created() {
    //this.getUSername();
  },
  watch: {
    // username: function (val) {
    //   console.log("val", val);
    //   this.username = val;
    // },
  },
  methods: {
    getUSername() {
      this.username = localStorage.getItem("username");
    },
  },
};
</script>

<style >
.main-h {
}
</style>>

</style>